<template>
    <div class="register">
         <my-head title="注册">
            <template #left>
                <div class="back" @click="gotobackall">
                    <van-icon name="revoke" size="18" color="#ff5f16" />
                </div>
            </template>
        </my-head>
        <div class="rebox">
            <van-form 
                @submit="onSubmit" 
                @failed="onFailed" 
                ref="form" >
                <van-field
                    v-model="form.username"
                    name="username"
                    clearable
                    left-icon="user-o"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="form.phone"
                    name="phone"
                    label="手机号"
                    left-icon="phone-o"
                    clearable
                    center
                    placeholder="手机号"
                    :rules="[
                        {required: true, message: '请填写手机号'},
                        {
                            pattern:reg.phone,
                            message:'请填写正确的手机号'
                        }
                    ]"
                >
                </van-field>

                <van-field
                    v-model="form.password"
                    :type="type"
                    name="password"
                    clearable
                    left-icon="warn-o"
                    label="密码"
                    placeholder="密码"
                    :rules="[
                        { required: true, message: '请填写密码' },
                        { pattern:reg.pwd, message:'请填写6-16位数字字母组合'}
                    ]"
                    :right-icon="type!='password'?'eye-o':'closed-eye'"
                    @click-right-icon="changeType"
                    @blur="checkPassword"
                />
                <!-- 封装组件  work  -->
                <van-field
                    v-model="form.dbpassword"
                    :type="type1"
                    name="dbpassword"
                    clearable
                    left-icon="warn-o"
                    label="确认密码"
                    placeholder="确认密码"
                    :rules="[
                        { required: true, message: '请填写确认密码' },
                        { pattern:reg.pwd, message:'请填写6-16位数字字母组合'},
                        {
                            validator:validator,
                            message:'两次密码不一致',

                        }
                    ]"
                    :right-icon="type1!='password'?'eye-o':'closed-eye'"
                    @click-right-icon="changeType1"
                />
                <div style="margin: 16px 0;" class="links">
                    <router-link :to="{name:'login'}" class="aitem color1 " >请登录</router-link>
                    <router-link :to="{name:'forgetpass'}" class="aitem color2 " >找回密码</router-link>
                </div>
                <div style="margin: 16px 0;">
                    <van-button  block type="warning" native-type="submit">注册</van-button>
                    <van-button class="mt20" block type="danger" native-type="reset">重置</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import {Toast,Notify} from 'vant'
export default {
    data(){
        return {
            form:{},
            type:'password',
            type1:"password",
        }
    },
    mounted(){
        this.ApiTest()
    },
    methods:{
        ApiTest(){
            // this.$axios.get("http://localhost:2116/msg")
            // .then(res=>{
            //     console.log(res)
            // })
            this.$ajax.apiTest()
            .then(res=>{

            })
        },
        onSubmit(value){
            console.log(value)
            // ajax 
            // 注册 
            // this.$axios.post("http://localhost:2116/user",value)
            // .then(res=>{
            // })

            // 先注册
            // 先判断用户名或者手机是否已经存在  
            // 查得到说明已经注册
            // 不能查询说明没有注册
            this.$ajax.findUser({
                phone:value.phone  // 手机号唯一 
            })
            .then(res=>{
                if(res.length>0){
                    this.$toast('账号已经被注册,请重新输入账号')
                }else{
                    this.$ajax.register(value)
                    .then(res=>{
                        this.ShowSuccess('注册成功')
                        this.form = {}
                        // 
                        this.$router.push({name:'login',query:{username:value.username,phone:value.phone}})
                    })
                }
            })
            
            
        },
        // 校验失败 
        onFailed(){
            // Toast("请输入有效的注册信息")
            this.$notify({
                message: '请输入有效的注册信息',
                color: '#ad0000',
                background: '#ffe1e1',
            });
        },
        changeType(){
            this.type = this.type=='password'?'text':'password'
        },
        changeType1(){
            this.type1 = this.type1=='password'?'text':'password'
        },
        // dbpasswor 正则判断
        validator(val){
            if(this.reg.pwd.test(this.form.password)){
                return val == this.form.password;   // 密码2次一样  不一样才会警告 
            }
        },
        checkPassword(){
            if(this.reg.pwd.test(this.form.password) && this.reg.pwd.test(this.form.dbpassword)){
                // 调取 dbpassword 的正则
                this.$refs.form.validate('dbpassword')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.register{
    width:100%;
    height:100%;
    background: #f4f4f4;
    .rebox{
        padding:15px;

    }
}
.mt20{
    margin-top:10px;
}
</style>